<template>
    <div v-loading="loading">
        提现记录
        <div v-if="data.length>0">
            <el-table :data="data" class="marginTop30" height="600px" size="small" style="width: 100%" v-loadmore="loadMoreData">
                <el-table-column :width="100" :label="'提现'+$store.state.config.coin_name" prop="balance">
                    <template slot-scope="scope">
                        <div class="flex align-center">
                            <span>{{scope.row.balance}}</span>
                            <i @click="copy(scope.row.trade_no)" class="iconfont icon-fuzhi color-blue cursor-pointer" style="font-size:22px"></i>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="提现时间" prop="created_at">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status==0">{{scope.row.created_at | getMdHis}}</span>
                        <span v-else>{{scope.row.response_time | getMdHis}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="到账(人民币)" prop="money"></el-table-column>
                <el-table-column label="手续费(人民币)" prop="fee"></el-table-column>
                <el-table-column label="充值状态" prop="status" sortable>
                    <template slot-scope="scope">
                        <div class="color-blue" v-if="scope.row.status==0">待审核</div>
                        <div class="color-green" v-else-if="scope.row.status==1">已通过</div>
                        <div class="color-red" v-else>已驳回</div>
                    </template>
                </el-table-column>
                <el-table-column label="备注" prop="reason"></el-table-column>

                <el-table-column :width="160" label="提现账户" prop="notes">
                    <template slot-scope="scope">
                        <div class="flex align-center">
                            <span>{{scope.row.bank_name}}({{scope.row.bank_card.substr(-4)}})</span>
                            <i @click="copy(scope.row.bank_card)" class="iconfont icon-fuzhi color-blue cursor-pointer" style="font-size:22px"></i>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="text-center font-15 color-999 mt-10" v-if="append_loading">加载中...</div>
            <div class="text-center font-15 color-999 mt-10" v-if="data.length>=total">~没有更多了~</div>
        </div>
        <div v-else>
            <el-empty :image="empty_image"></el-empty>
        </div>
    </div>
</template>

<script>
import pageTool from '@/mixins/page'
export default {
    mixins: [pageTool],
    mounted() {
        this.beforeInit()
    },
    data(){
        return {
            empty_image: require('@/assets/image/empty.png'),
        }
    },
    directives: {
        loadmore: {
            bind(el, binding) {
                const selectWrap = el.querySelector('.el-table__body-wrapper')
                selectWrap.addEventListener('scroll', function () {
                    const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
                    if (scrollDistance <= 0.5) {
                        binding.value() //执行在使用时绑定的函数，在这里即addData方法
                    }
                })
            },
        },
    },
    methods: {
        beforeInit() {
            this.url = '/withdraw/index'
            this.append = true
            this.init() //重新请求数据
        },
        copy(text) {
            const inputElement = document.createElement('input')
            inputElement.value = text
            document.body.appendChild(inputElement)
            inputElement.select()
            document.execCommand('copy')
            document.body.removeChild(inputElement)
            this.$message.success('复制成功')
        },
        loadMoreData() {
            this.page++
            this.init()
        },
    },
}
</script>

<style></style>